<template>
  <div class="profile">
    <div class="ui form profile-form">
      <div class="field inline">
        <label for="profile-nick">昵称</label>
        <input id="profile-nick" type="text" class="user_nick" v-model="newuser.nick">
      </div>

      <div class="field inline">
        <label for="profile-avatar">头像</label>
        <img v-bind:src="avatar" v-on:click="clickAvatar" id="profile-avatar" class="ui avatar image">
        <input type="file" style="display: none" name="file" ref="avatar_file" v-on:change="uploadAvatar">
      </div>
      <div class="field inline">
        <label for="profile-bio">个人简介</label>
        <input id="profile-bio" type="text" class="user_bio" v-model="newuser.bio">
      </div>
      <div class="field inline">
        <label></label>
        <button class="ui orange submit button register-btn-submit large" id="btn-submit" name="button" v-on:click="saveUser" type="submit">保存</button>
      </div>
    </div>
  </div>
</template>

<script>
  import {mapGetters, mapActions} from 'vuex'
  import cos from '../utils/upload'
  export default {
    name: 'Profile',
    data () {
      return {
        err: '',
        avatar: this.$store.state.user.avatar
      }
    },
    beforeRouteEnter (to, from, next) {
      next(vm => vm.getUser())
    },
    computed: {
      ...mapGetters(['user']),
      newuser: function () {
        var obj = {}
        obj = JSON.parse(JSON.stringify(this.$store.state.user))
        return obj
      }
    },
    methods: {
      ...mapActions(['getUser']),
      saveUser () {
        if (this.newuser.nick === '') {
          this.err = '昵称不能为空'
          return
        }
        var _this = this
        console.log('save user:', this.newuser)
        this.$api.saveUser(this.newuser).then(function (data) {
          if (data.code === 0) {
            _this.$store.commit('updateUser', _this.newuser)
            _this.err = '保存成功'
          } else {
            _this.err = data.msg
          }
        })
      },
      clickAvatar () {
        console.log('点击头像')
        this.$refs['avatar_file'].click()
      },
      uploadAvatar () {
        console.log('自动上传头像')
        var file = this.$refs['avatar_file'].files[0]
        console.log('file:', file)
        var filename = 'file/' + file.name
        var _this = this
        var reader = new FileReader()
        reader.readAsDataURL(file) // 这里是最关键的一步，转换就在这里
        reader.onloadend = function () {
          _this.avatar = this.result
        }
        cos.putObject({
          Bucket: 'uploads-10002127', /* 必须 */
          Region: 'ap-shanghai',    /* 必须 */
          Key: filename,              /* 必须 */
          StorageClass: 'STANDARD',
          Body: file, // 上传文件对象
          onProgress: function (progressData) {
            console.log('progress:', JSON.stringify(progressData))
          }
        }, function (err) {
          console.log('err', err)
          if (!err) {
            _this.newuser.avatar = 'https://uploads-10002127.cos.ap-shanghai.myqcloud.com/' + filename
          } else {
            _this.err = '上传失败'
          }
        })
      }
    }
  }
</script>

<style scoped>
.profile {
  position: fixed;
  margin-top: 20px;
  margin-left: 20%;
}
.profile-form {
  margin-top: 10px;
}

.profile-form .field label {
  min-width: 95px;
  font-size: 14px;
  color: #666666;
  text-align: right;
  margin-right: 20px;
}
.profile-form .field.inline input, .profile-form .field.inline button {
  width: 300px;
}

.profile-form .field input[type="text"], .profile-form .field input[type="email"],
.profile-form .field input[type="datetime-local"], .profile-form .field input[type="password"],
.profile-form .field input[type="number"], .profile-form .field input[type="url"],
.profile-form .field input[type="tel"] {
  padding-top: 0.64286em;
  padding-bottom: 0.64286em;
  line-height: 1.42858em;
  font-size: 1rem;
}

.profile-form .field .avatar {
  height: 60px;
  width: 60px;
}
</style>
